<template>
  <div class="friendship-container">
    <!-- 顶部宇宙星空背景 -->
    <div class="universe-background">
      <div class="stars"></div>
      <div class="twinkling"></div>
      <div class="page-title">
        <h1 class="main-title">友链银河</h1>
        <p class="subtitle">探索网络中美丽的星球</p>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <!-- 友链描述 -->
      <el-card class="friendship-intro" shadow="hover">
        <div class="intro-content">
          <div class="intro-icon">
            <el-icon class="pulse-icon">
              <Connection />
            </el-icon>
          </div>
          <div class="intro-text">
            <h2>交换友链，连接世界</h2>
            <p>每个友链都是银河系中的一颗星球，闪烁着独特的光芒。加入我们的星系，一起构建更广阔的网络宇宙！</p>
          </div>
          <div class="apply-btn-container">
            <el-button type="primary" round size="large" :disabled="isSubmissionLocked" @click="openApplyModal"
              class="cosmic-btn">
              <el-icon v-if="!isSubmissionLocked">
                <Plus />
              </el-icon>
              <el-icon v-else class="is-loading">
                <Loading />
              </el-icon>
              {{ isSubmissionLocked ? '提交冷却中' : '申请友链' }}
            </el-button>
          </div>
        </div>
      </el-card>

      <WebsiteConfig :keys="[
        'siteName',
        'typewriterText',
        'siteAnnouncement',
        'avatarImg',
        'personalMotto',
        'wzURL',
      ]">
        <template #default="{ config }">
          <div v-if="!config" class="simple-loading">
            加载中...
          </div>
          <!-- 我的友链信息卡片 -->
          <el-card v-else class="my-friendship-info" shadow="hover">
            <div class="my-info-content">
              <h2 class="info-title">
                <el-icon>
                  <Star />
                </el-icon> 我的友链信息
              </h2>
              <p class="info-desc">欢迎添加我的友链，以下是您需要的信息：</p>

              <div class="my-info-details">
                <el-row :gutter="20">
                  <el-col :xs="24" :sm="12" :md="12">
                    <div class="info-preview">
                      <div class="preview-card">
                        <el-avatar :size="80" :src="config.avatarImg" fit="cover"></el-avatar>
                        <div class="preview-text">
                          <h3>{{ config.siteName }}</h3>
                          <p>{{ config.typewriterText }}</p>
                        </div>
                      </div>
                    </div>
                  </el-col>
                  <el-col :xs="24" :sm="12" :md="12">
                    <div class="info-data">
                      <el-descriptions :column="1" border>
                        <el-descriptions-item label="网站名称">
                          <span class="copy-text">{{ config.siteName }}</span>
                          <el-button type="primary" link size="small" @click="copyText(config.siteName)">
                            <el-icon>
                              <CopyDocument />
                            </el-icon>
                          </el-button>
                        </el-descriptions-item>
                        <el-descriptions-item label="网站链接">
                          <span class="copy-text">{{ config.wzURL }}</span>
                          <el-button type="primary" link size="small" @click="copyText(config.wzURL)">
                            <el-icon>
                              <CopyDocument />
                            </el-icon>
                          </el-button>
                        </el-descriptions-item>
                        <el-descriptions-item label="头像链接">
                          <span class="copy-text">{{ config.avatarImg }}</span>
                          <el-button type="primary" link size="small" @click="copyText(config.avatarImg)">
                            <el-icon>
                              <CopyDocument />
                            </el-icon>
                          </el-button>
                        </el-descriptions-item>
                        <el-descriptions-item label="网站简介">
                          <span class="copy-text">{{ config.typewriterText }}</span>
                          <el-button type="primary" link size="small" @click="copyText(config.typewriterText)">
                            <el-icon>
                              <CopyDocument />
                            </el-icon>
                          </el-button>
                        </el-descriptions-item>
                      </el-descriptions>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-card>
        </template>
      </WebsiteConfig>

      <!-- 友链分类标签 -->
      <div class="tags-container">
        <el-tag v-for="tag in friendTags" :key="tag.value" :type="activeTag === tag.value ? '' : 'info'" effect="dark"
          class="filter-tag" @click="filterByTag(tag.value)">
          <el-icon v-if="tag.icon">
            <component :is="tag.icon" />
          </el-icon>
          {{ tag.label }}
        </el-tag>
      </div>

      <!-- 搜索框 -->
      <div class="search-container">
        <el-input v-model="searchQuery" placeholder="搜索友链名称或简介..." clearable prefix-icon="Search">
          <template #prefix>
            <el-icon>
              <Search />
            </el-icon>
          </template>
        </el-input>
      </div>

      <!-- 友链卡片展示区 -->
      <transition-group name="friend-list" tag="div" class="friends-grid">
        <template v-if="filteredFriendsList.length > 0">
          <div v-for="(item, index) in filteredFriendsList" :key="index" class="friend-card-wrapper"
            :style="{ animationDelay: `${index * 0.1}s` }">
            <div class="friend-card" :class="{ 'is-new': item.isNew }" @click="openLink(item.friendshipUrl)">
              <div class="card-avatar">
                <el-avatar :size="80" :src="item.friendshipImg" fit="cover">
                  <el-icon>
                    <User />
                  </el-icon>
                </el-avatar>
                <div v-if="item.isNew" class="new-badge">新</div>
              </div>
              <div class="card-content">
                <h3 class="site-name">{{ item.friendshipName }}</h3>
                <p class="site-excerpt">{{ item.friendshipExcerpt }}</p>
                <div class="hover-effect">
                  <el-button type="primary" text>
                    <el-icon>
                      <ArrowRight />
                    </el-icon> 访问
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </template>
        <div v-else class="empty-state">
          <el-empty description="没有找到匹配的友链" :image-size="200">
            <el-button type="primary" @click="resetFilters">重置筛选</el-button>
          </el-empty>
        </div>
      </transition-group>

      <!-- 随机推荐 -->
      <div class="random-recommendation" v-if="friendshipList.length > 3">
        <h3 class="section-title">
          <el-icon>
            <MagicStick />
          </el-icon> 随机推荐
        </h3>
        <div class="recommendation-cards">
          <div v-for="(item, index) in randomFriends" :key="'random-' + index" class="mini-card"
            @click="openLink(item.friendshipUrl)">
            <el-avatar :size="40" :src="item.friendshipImg"></el-avatar>
            <div class="mini-info">
              <div class="mini-name">{{ item.friendshipName }}</div>
              <div class="mini-desc">{{ truncateText(item.friendshipExcerpt, 20) }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 友链申请模态框 -->
    <el-dialog v-model="showApplyModal" title="申请友链" width="500px" destroy-on-close class="apply-dialog">
      <div class="dialog-header-illustration">
        <img src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.5.2/collection/components/icon/svg/earth.svg"
          alt="地球">
      </div>

      <el-steps :active="formStep" finish-status="success" simple style="margin: 20px 0">
        <el-step title="基本信息" />
        <el-step title="补充资料" />
        <el-step title="验证提交" />
      </el-steps>

      <el-form ref="applyFormRef" :model="applyForm" :rules="applyFormRules" label-width="100px"
        class="application-form">
        <!-- 第一步：基本信息 -->
        <div v-if="formStep === 0">
          <el-form-item label="网站名称" prop="friendshipName">
            <el-input v-model="applyForm.friendshipName" placeholder="请输入网站名称" prefix-icon="Document" />
          </el-form-item>

          <el-form-item label="网站链接" prop="friendshipUrl">
            <el-input v-model="applyForm.friendshipUrl" placeholder="请输入网站完整URL（https://...）" prefix-icon="Link" />
          </el-form-item>
        </div>

        <!-- 第二步：补充资料 -->
        <div v-if="formStep === 1">
          <el-form-item label="网站头像" prop="friendshipImg">
            <el-input v-model="applyForm.friendshipImg" placeholder="请输入网站头像URL" prefix-icon="Picture" />
          </el-form-item>

          <el-form-item label="网站简介" prop="friendshipExcerpt">
            <el-input v-model="applyForm.friendshipExcerpt" type="textarea" :rows="4" placeholder="请简要介绍您的网站（不超过100字）"
              maxlength="100" show-word-limit />
          </el-form-item>
        </div>

        <!-- 第三步：验证提交 -->
        <div v-if="formStep === 2">
          <div class="verification-info">
            <el-alert title="友链申请须知" type="info" description="提交后需要审核，请耐心等待。同一IP 3小时内只能提交一次申请。" show-icon
              :closable="false" />
          </div>

          <el-form-item label="验证计算" prop="verifyCode">
            <el-row :gutter="10">
              <el-col :span="12">
                <el-input v-model.number="applyForm.verifyCode" placeholder="请计算结果" @keyup.enter="submitApplication" />
              </el-col>
              <el-col :span="12" class="verify-code-display">
                {{ verifyCodeQuestion }}
              </el-col>
            </el-row>
          </el-form-item>

          <div class="preview-section">
            <h4>预览您的友链</h4>
            <div class="preview-card">
              <el-avatar :size="50" :src="applyForm.friendshipImg || '/api/placeholder/50/50'"></el-avatar>
              <div class="preview-info">
                <h3>{{ applyForm.friendshipName || '您的网站名称' }}</h3>
                <p>{{ applyForm.friendshipExcerpt || '您的网站介绍...' }}</p>
              </div>
            </div>
          </div>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="formStep > 0 ? formStep-- : showApplyModal = false">
            {{ formStep > 0 ? '上一步' : '取消' }}
          </el-button>
          <el-button type="primary" @click="formStep < 2 ? nextStep() : submitApplication()" :loading="submitting">
            {{ formStep < 2 ? '下一步' : '提交申请' }} </el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { listFriendship, addFriendship } from '@/api/bk/friendship.js';
import { ElMessage, ElMessageBox } from 'element-plus';
import {
  ArrowRight, Connection, Loading,
  Picture, Document, Link, Plus, Search, User, MagicStick, Star, CopyDocument
} from '@element-plus/icons-vue';
import WebsiteConfig from '@/components/WebsiteConfig/index.vue'  // 导入网站配置组件


// 基础数据
const friendshipList = ref([]);
const queryParams = ref({ friendshipStatus: 1 });
const showApplyModal = ref(false);
const applyFormRef = ref(null);
const submitting = ref(false);
const isSubmissionLocked = ref(false);
const formStep = ref(0);
const searchQuery = ref('');
const activeTag = ref('all');

// 友链类型标签
const friendTags = [
  { label: '全部', value: 'all', icon: 'Grid' },
  // { label: '博客', value: '博客', icon: 'Document' },
  // { label: '技术', value: '技术', icon: 'Monitor' },
  // { label: '资源', value: '资源', icon: 'Collection' },
  // { label: '其他', value: '其他', icon: 'More' }
];

// 随机推荐的友链
const randomFriends = computed(() => {
  if (friendshipList.value.length <= 3) return [];

  // 随机选择3个不重复的友链
  const shuffled = [...friendshipList.value].sort(() => 0.5 - Math.random());
  return shuffled.slice(0, 3);
});

// 筛选后的友链列表
const filteredFriendsList = computed(() => {
  return friendshipList.value.filter(item => {
    // 标签筛选 - 由于没有category字段，这里改为按照名称筛选
    const tagMatch = activeTag.value === 'all' ||
      (activeTag.value === '博客' && item.friendshipName.includes('博客')) ||
      (activeTag.value === '技术' && item.friendshipName.includes('技术')) ||
      (activeTag.value === '资源' && item.friendshipName.includes('资源')) ||
      (activeTag.value === '其他');

    // 搜索筛选
    const searchMatch = !searchQuery.value ||
      item.friendshipName.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
      item.friendshipExcerpt.toLowerCase().includes(searchQuery.value.toLowerCase());

    return tagMatch && searchMatch;
  });
});

// 随机数生成验证码
const generateVerifyCode = () => {
  const num1 = Math.floor(Math.random() * 10) + 1;
  const num2 = Math.floor(Math.random() * 10) + 1;
  const operators = ['+', '-', '*'];
  const operator = operators[Math.floor(Math.random() * operators.length)];

  let result;
  switch (operator) {
    case '+': result = num1 + num2; break;
    case '-': result = num1 - num2; break;
    case '*': result = num1 * num2; break;
  }

  return {
    question: `${num1} ${operator} ${num2} = ?`,
    answer: result
  };
};

// 验证码相关
const verifyCodeInfo = ref(generateVerifyCode());
const verifyCodeQuestion = computed(() => verifyCodeInfo.value.question);

// 申请表单
const applyForm = ref({
  friendshipName: '',
  friendshipUrl: '',
  friendshipImg: '',
  friendshipExcerpt: '',
  verifyCode: ''
});

// 表单验证规则
const applyFormRules = {
  friendshipName: [
    { required: true, message: '请输入网站名称', trigger: 'blur' },
    { min: 2, max: 20, message: '网站名称长度应在2到20个字符之间', trigger: 'blur' }
  ],
  friendshipUrl: [
    { required: true, message: '请输入网站链接', trigger: 'blur' },
    {
      pattern: /^https?:\/\/.+\..+/,
      message: '请输入有效的URL（以http://或https://开头）',
      trigger: 'blur'
    }
  ],
  friendshipImg: [
    { required: true, message: '请输入网站头像链接', trigger: 'blur' },
    {
      pattern: /^https?:\/\/.+/,
      message: '请输入有效的图片URL',
      trigger: 'blur'
    }
  ],
  friendshipExcerpt: [
    { required: true, message: '请输入网站简介', trigger: 'blur' },
    { min: 2, max: 100, message: '网站简介应在2到100个字符之间', trigger: 'blur' }
  ],
  verifyCode: [
    {
      validator: (rule, value, callback) => {
        if (!value && value !== 0) {
          callback(new Error('请输入验证码计算结果'));
        } else if (parseInt(value) !== verifyCodeInfo.value.answer) {
          callback(new Error('验证码计算错误'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
};

// 检查是否在冷却期
const checkCooldown = () => {
  const lastSubmissionTime = localStorage.getItem('friendshipSubmissionTime');
  if (lastSubmissionTime) {
    const currentTime = new Date().getTime();
    const timeDiff = currentTime - parseInt(lastSubmissionTime);
    // 3小时 = 3 * 60 * 60 * 1000 毫秒
    if (timeDiff < 3 * 60 * 60 * 1000) {
      isSubmissionLocked.value = true;
      // 计算剩余时间
      const remainingTime = 3 * 60 * 60 * 1000 - timeDiff;
      const remainingHours = Math.floor(remainingTime / (60 * 60 * 1000));
      const remainingMinutes = Math.floor((remainingTime % (60 * 60 * 1000)) / (60 * 1000));

      ElMessage.info(`冷却中，请在${remainingHours}小时${remainingMinutes}分钟后再次申请`);

      // 设置定时器，到时间后自动解锁
      setTimeout(() => {
        isSubmissionLocked.value = false;
        ElMessage.success('现在您可以再次申请友链了！');
      }, remainingTime);

      return true;
    }
  }
  isSubmissionLocked.value = false;
  return false;
};

// 获取友链列表
const getList = async () => {
  try {
    const response = await listFriendship(queryParams.value);
    // 标记最近7天内的新友链
    const sevenDaysAgo = new Date();
    sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);

    friendshipList.value = response.rows.map(item => {
      // 假设友链有创建时间字段createTime，如果没有可以去掉这部分逻辑
      const isNew = item.createTime && new Date(item.createTime) > sevenDaysAgo;
      return { ...item, isNew };
    });
  } catch (error) {
    console.error('获取友链列表失败:', error);
    ElMessage.error('获取友链列表失败，请稍后再试');
  }
};

// 打开链接
const openLink = (url) => {
  if (!url.startsWith('http')) {
    url = 'https://' + url;
  }
  window.open(url, '_blank');
};

// 打开申请模态框
const openApplyModal = () => {
  // 检查是否在冷却期
  if (checkCooldown()) return;

  // 重置表单
  applyForm.value = {
    friendshipName: '',
    friendshipUrl: '',
    friendshipImg: '',
    friendshipExcerpt: '',
    verifyCode: ''
  };
  formStep.value = 0;

  // 重置验证码
  verifyCodeInfo.value = generateVerifyCode();
  showApplyModal.value = true;
};

const nextStep = async () => {
  try {
    // 分步验证逻辑
    if (formStep.value === 0) {
      // 第一步验证
      await Promise.all([
        applyFormRef.value.validateField('friendshipName'),
        applyFormRef.value.validateField('friendshipUrl')
      ]);
    } else if (formStep.value === 1) {
      // 第二步验证
      await Promise.all([
        applyFormRef.value.validateField('friendshipImg'),
        applyFormRef.value.validateField('friendshipExcerpt')
      ]);
    }

    formStep.value++;
    if (formStep.value === 2) {
      verifyCodeInfo.value = generateVerifyCode();
    }
  } catch (error) {
    ElMessage.error(error.message || '请正确填写表单');
  }
};

// 提交申请
const submitApplication = async () => {
  if (!applyFormRef.value) return;

  try {
    // 先验证验证码
    await applyFormRef.value.validateField('verifyCode');
    // 再验证整个表单
    await applyFormRef.value.validate();

    submitting.value = true;

    // 检查是否已存在相同的友链
    const existingLinks = await listFriendship(queryParams.value);
    const isDuplicate = existingLinks.rows.some(
      link =>
        link.friendshipName === applyForm.value.friendshipName ||
        link.friendshipUrl === applyForm.value.friendshipUrl
    );

    if (isDuplicate) {
      ElMessage.error('已存在相同的友链，请勿重复提交');
      submitting.value = false;
      return;
    }

    // 提交友链
    await addFriendship({
      friendshipName: applyForm.value.friendshipName,
      friendshipUrl: applyForm.value.friendshipUrl,
      friendshipImg: applyForm.value.friendshipImg,
      friendshipExcerpt: applyForm.value.friendshipExcerpt
    });

    // 记录提交时间
    localStorage.setItem('friendshipSubmissionTime', new Date().getTime().toString());

    ElMessage.success({
      message: '友链申请提交成功，请等待审核',
      duration: 5000
    });

    showApplyModal.value = false;
    isSubmissionLocked.value = true;

    // 显示成功动画
    ElMessageBox.alert(
      '您的友链申请已成功提交！我们将尽快审核，请耐心等待。',
      '申请成功',
      {
        confirmButtonText: '我知道了',
        type: 'success',
        center: true
      }
    );

    // 3小时后解锁
    setTimeout(() => {
      isSubmissionLocked.value = false;
    }, 3 * 60 * 60 * 1000);
  } catch (error) {
    console.error('验证或提交失败:', error);
    ElMessage.error('申请失败：' + (error.message || '未知错误'));
  } finally {
    submitting.value = false;
  }
};

// 按标签筛选
const filterByTag = (tag) => {
  activeTag.value = tag;
};

// 重置筛选
const resetFilters = () => {
  activeTag.value = 'all';
  searchQuery.value = '';
};

// 截断文本
const truncateText = (text, length) => {
  if (!text) return '';
  return text.length > length ? text.substring(0, length) + '...' : text;
};

// 复制文本到剪贴板函数
const copyText = (text) => {
  navigator.clipboard.writeText(text).then(() => {
    ElMessage({
      message: '复制成功！',
      type: 'success',
      duration: 1500
    });
  }).catch(() => {
    ElMessage.error('复制失败，请手动复制');
  });
};

// 生命周期钩子
onMounted(() => {
  getList();
  checkCooldown();
});

// 监听搜索和标签变化，添加过渡动画效果
watch([searchQuery, activeTag], () => {
  // 可以在这里添加额外逻辑，如果需要的话
});
</script>


<style lang="scss" scoped>
.friendship-container {
  min-height: 100vh;
  padding-bottom: 60px;
  background: rgba(248, 249, 250, 0.33); // 半透明背景色
  backdrop-filter: blur(10px); // 模糊半径
  -webkit-backdrop-filter: blur(10px); // Safari 兼容

}

/* 宇宙星空背景 - 优化版 */
.universe-background {
  position: relative;
  height: 420px;
  /* 更自然的深空蓝渐变 */
  background: linear-gradient(to bottom,
      #0a1a3f 0%,
      /* 顶部深蓝色 */
      #1e3b8ae5 30%,
      /* 中层过渡色 */
      #3b83f6b6 70%,
      /* 主星云色 */
      #93c4fd00 100%
      /* 底部浅色光晕 */
    );
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
  margin-bottom: 30px;
}

/* 星空动态效果增强 */
.stars {
  background: transparent;
  animation: starPulse 8s infinite alternate;
  /* 星光脉冲效果 */
}

@keyframes starPulse {
  0% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

.twinkling {
  background: radial-gradient(circle at 50% 20%,
      rgba(255, 255, 255, 0.3) 10%,
      transparent 30%);
  animation: twinkle 5s linear infinite;
  /* 顶部星云微光 */
}

@keyframes twinkle {
  0% {
    transform: translateY(-10%);
  }

  100% {
    transform: translateY(10%);
  }
}

.stars {
  background: transparent url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.5.2/collection/components/icon/svg/star-outline.svg') repeat;
  background-size: 200px 200px;
  animation: move-stars 50s linear infinite;
  opacity: 0.4;
}

.twinkling {
  background: transparent url('https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.5.2/collection/components/icon/svg/star-outline.svg') repeat;
  background-size: 300px 300px;
  animation: move-twinkle 30s linear infinite;
  opacity: 0.2;
}

.main-title {
  font-size: 48px;
  margin-bottom: 10px;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.9);
  animation: pulse 2s infinite;
  font-weight: 700;
  letter-spacing: 2px;
}

.subtitle {
  font-size: 18px;
  opacity: 0.9;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* 我的友链信息卡片样式 */
.simple-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 18px;
  color: white;
}

.my-friendship-info {
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
}

.my-info-content {
  padding: 10px;
}

.info-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #409EFF;
  margin-bottom: 15px;
  font-size: 22px;

  .el-icon {
    font-size: 24px;
    color: #f59e0b;
  }
}

.info-desc {
  margin-bottom: 20px;
  color: #666;
  font-size: 16px;
}

.my-info-details {
  margin-top: 20px;
}

.info-preview {
  .preview-card {
    display: flex;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 100%;
    min-height: 150px;
  }

  .preview-text {
    margin-left: 20px;

    h3 {
      margin: 0 0 10px 0;
      color: #333;
    }

    p {
      margin: 0;
      color: #666;
      font-size: 14px;
      line-height: 1.6;
    }
  }
}

.info-data {
  height: 100%;

  .copy-text {
    margin-right: 10px;
    color: #606266;
    overflow: hidden;
    /* 隐藏溢出内容 */
    white-space: nowrap;
    /* 禁止文本换行 */
    text-overflow: ellipsis;
    /* 添加省略号 */
    max-width: 200px;
    /* 重要！必须设置宽度限制 */
    display: inline-block;
    /* 使 max-width 对行内元素生效 */
  }
}

// 响应式调整
@media (max-width: 768px) {
  .my-info-details {
    .el-col:first-child {
      margin-bottom: 20px;
    }
  }
}

/* 主要内容区域 */
.content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px;
  /* 增加内边距让内容呼吸 */
  border-radius: 15px;
  /* 柔和圆角 */
  background: rgba(255, 255, 255, 0.08);
  /* 半透明白色基底 */

  /* 毛玻璃核心效果 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Safari 兼容 */

  /* 增强层次感的阴影 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

  /* 边框微光效果 */
  border: 5px solid rgba(182, 255, 175, 0.1);
}

/* 友链介绍卡片 */
.friendship-intro {
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
}

.intro-content {
  display: flex;
  align-items: center;
  padding: 10px;
}

.intro-icon {
  font-size: 40px;
  margin-right: 20px;
  color: #409EFF;
}

.pulse-icon {
  font-size: 40px;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.intro-text {
  flex: 1;
}

.intro-text h2 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
}

.intro-text p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

.apply-btn-container {
  margin-left: 20px;
}

.cosmic-btn {
  background: linear-gradient(135deg, #42d392 0%, #409EFF 100%);
  border: none;
  padding: 12px 24px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
    opacity: 0.9;
  }

  &:disabled {
    background: #a0cfff;
    cursor: not-allowed;
  }
}



/* 标签筛选 */
.tags-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  gap: 10px;
}

.filter-tag {
  cursor: pointer;
  padding: 8px 16px;
  font-size: 14px;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }
}

/* 搜索框 */
.search-container {
  margin-bottom: 30px;
}

/* 友链卡片网格 */
.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 40px;
}

.friend-card-wrapper {
  animation: fade-in 0.5s ease forwards;
  opacity: 0;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.friend-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;

  &:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);

    .hover-effect {
      opacity: 1;
    }
  }

  &.is-new::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px 0;
    border-color: transparent #42d392 transparent transparent;
  }
}

.card-avatar {
  position: relative;
  margin-bottom: 15px;
}

.new-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #f56c6c;
  color: white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  animation: bounce 1s infinite alternate;
}

@keyframes bounce {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.2);
  }
}

.card-content {
  width: 100%;
  text-align: center;
}

.site-name {
  margin: 10px 0;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.site-tags {
  margin-bottom: 10px;
}

.site-excerpt {
  color: #666;
  font-size: 14px;
  line-height: 1.5;
  height: 60px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 15px;
}

.hover-effect {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 空状态 */
.empty-state {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  padding: 40px 0;
}

/* 随机推荐 */
.random-recommendation {
  margin-top: 50px;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #333;
  font-size: 22px;
}

.recommendation-cards {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding-bottom: 15px;
}

.mini-card {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #f9f9f9;
  border-radius: 10px;
  min-width: 250px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  }
}

.mini-info {
  margin-left: 15px;
}

.mini-name {
  font-weight: bold;
  margin-bottom: 5px;
}

.mini-desc {
  font-size: 12px;
  color: #666;
}

/* 申请对话框 */
.apply-dialog {
  .dialog-header-illustration {
    text-align: center;
    margin-bottom: 20px;

    img {
      width: 100px;
      height: 100px;
      animation: float 3s ease-in-out infinite;
    }
  }

  @keyframes float {
    0% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-10px);
    }

    100% {
      transform: translateY(0px);
    }
  }

  .verification-info {
    margin-bottom: 20px;
  }

  .verify-code-display {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f7fa;
    color: #333;
    font-weight: bold;
    height: 40px;
    border-radius: 4px;
  }

  .preview-section {
    margin-top: 20px;
    border-top: 1px dashed #eee;
    padding-top: 20px;

    h4 {
      margin-bottom: 15px;
      color: #606266;
    }
  }

  .preview-card {
    display: flex;
    align-items: center;
    padding: 15px;
    background: #f5f7fa;
    border-radius: 8px;

    h3 {
      margin: 0 0 5px 0;
      font-size: 16px;
    }

    p {
      margin: 0;
      font-size: 12px;
      color: #606266;
    }

    .preview-info {
      margin-left: 15px;
    }
  }
}

/* 列表过渡动画 */
.friend-list-enter-active,
.friend-list-leave-active {
  transition: all 0.5s ease;
}

.friend-list-enter-from,
.friend-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .intro-content {
    flex-direction: column;
    text-align: center;
  }

  .intro-icon {
    margin-right: 0;
    margin-bottom: 15px;
  }

  .apply-btn-container {
    margin-left: 0;
    margin-top: 20px;
  }

  .friends-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }
}
</style>